<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8" />
    <style type="text/css">
        .gray{
            background: #ccc;
        }
    </style>
	<script type="text/javascript" src="../lib/vue.js"></script>
    <!--如果vue想做交互 引入: vue-resouce.js-->
	<script type="text/javascript" src="../lib/vue-resource.js"></script>
	<script type="text/javascript">
		window.onload=function(){
			var vm = new Vue({
				el: "#box",
				data:{
					//数据
                    myData:[],
                    keyword:'',
                    now:-1,
				},
                methods:{
                    getbaidu:function(e){
                        //https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&json=1&p=3&sid=22583_1464_21112_17001_20881_22176_22160&req=2&csor=1&cb=jQuery11020797948577722277_1492306899197&_=1492306899200
                        //做处理  https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow

                        //如果按上下键时不执行
                        if(e.keyCode==38||e.keyCode==40) return ;

                        //按回车键直接进入百度搜索页面
                        if(e.keyCode==13){
                            window.open("https://www.baidu.com/baidu?wd="+this.keyword);
                        }

                        this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{
                            wd:this.keyword,
                        },{
                            jsonp:'cb'	//callback名字，默认名字就是"callback"
                        }
                        ).then(function(res1){
                            this.myData=res1.data.s;
                        },function(res2){
                            console.log(res2);
                        })
                    },
                    changeDown:function(){
                        this.now++;
                        if(this.now==this.myData.length){
                            this.now=-1;
                        }
                        this.keyword=this.myData[this.now];
                    },
                    changeUp:function(){
                        this.now--;
                        if(this.now==-2){
                            this.now=this.myData.length-1;
                        }
                        this.keyword=this.myData[this.now];
                    }
                }
			})
		}
	</script>
</head>
<body>
<div id="box">
    <input type="text" v-model="keyword" @keyup="getbaidu($event)" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()">
    <ul>
        <li v-for="(key,value) in myData" :class="{gray:$index==now}">{{key}}==={{value}}</li>
    </ul>
    <p v-show="myData.length==0">暂无搜索结果</p>
</div>
</body>
</html>